 // 电商自定义swiper样式
 @height:450px;
 @prevmarginleft:250px;
 .swiper-container {
    width: 1300px;
    height: @height;
    --swiper-theme-color: white;/* 设置Swiper风格 */
    --swiper-navigation-color: lighten(gray,20%);/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */
    img{
        width: 1300px;
        height: @height;
        position: relative;
    }
    .swiper-button-prev{
        margin-left: @prevmarginleft;
    }
    .swiper-pagination{
        width: 100px;
        position: absolute;
        left: 1200px;
        span{
            border: 2px white solid;
        }
    }
    .category{
        position: absolute;
        top: 0;
        z-index: 10;
        
        span{
            font-size: 20px;
            font-weight: bold;
            color: white;
        }
        .first_category{
            position: absolute;
            top: 0;
            width: @prevmarginleft - 20;
            height: @height;
            padding: 25px 0px 20px 0px;
            background:rgba(128, 128, 128,.3);
            // li:not(:first-child){
            //     // margin-top: 22px;           
            // }
            .first_category_li{
                line-height: 40px;
                height: 40px;
                a{
                    padding-left: 10px;
                    color: white;
                    font-size: 14px;
                }
                span{
                    right: 5px;
                    position: absolute;
                }
                &:hover{
                    background:#FF6700;
                }
                .second_category{
                    padding: 20px;
                    position: absolute;
                    top: 1px;
                    bottom: 1px;
                    left:@prevmarginleft - 20;
                    background: white;
                    height: @height;
                    min-width: 600px;
                    max-width: 1000px;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    align-content: flex-start;
                    -moz-box-shadow:0px -1px 8px #333333; -webkit-box-shadow:0px -1px 8px #333333; box-shadow:0px -1px 8px #333333;
                    li{
                        flex-basis: 16%;
                        overflow: hidden;
                        width: 200px;
                        line-height: 50px;
                        a{
                            color: black;
                            float: left;
                            line-height: 50px;
                        }
                        img{
                            width: 30px;
                            height: 30px;
                            float: left;
                            background-size: cover;
                            margin-top: 10px;
                        }
                    
                        &:hover a{
                            color:#FF6700;
                        }
                    }
                }
            }  
        }
        
    }
}